<template>
  <div>
    <div align="center">
      <strong>{{ title }}</strong>
    </div>
    <el-divider></el-divider>
    <div class="center_dialog">
      <el-form ref="form" label-position="right" :model="form" :rules="rules" label-width="150px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="值班日期" prop="dutyStartTime">
              <el-date-picker :disabled="(title === '记录详情')" @change="handlerTimeChange" v-model="realTime"
                type="datetimerange" range-separator="至" style="width:100%" start-placeholder="开始日期"
                value-format="yyyy-MM-dd HH:mm:ss" end-placeholder="结束日期">
              </el-date-picker>
              <!-- <el-date-picker :disabled="(title === '记录详情')" v-model="form.dutyDate" type="date" placeholder="选择日期"
                style="width:100%" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
              </el-date-picker> -->
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="值班时间" prop="dutyStartTime">
              <el-time-picker :disabled="(title === '记录详情')" is-range v-model="realTime"
                :default-value="[new Date(2016, 9, 10, 0, 0), new Date(2016, 9, 10, 23, 0)]" style="width:100%"
                value-format="HH:mm" @change="handlerTimeChange" range-separator="至" start-placeholder="开始时间"
                end-placeholder="结束时间" placeholder="选择时间范围">
              </el-time-picker>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="班别" prop="dutyType">
              <el-select :disabled="(title === '记录详情')" v-model="form.dutyType" placeholder="请选择班别" style="width:100%"
                clearable>
                <el-option v-for="(dict, index) in ascArr" :key="index" :label="dict" :value="index + ''">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="值班地点" prop="dutyAddress">
              <el-input disabled v-model="form.dutyAddress" placeholder="请输入值班地点" style="width:100%">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">

          <el-col :span="8">
            <el-form-item label="值班人" prop="dutyUser">
              <el-select :disabled="(title === '记录详情')" @change="handlerChangeUser" v-model="form.dutyUser"
                style="width:100%" placeholder="请选择值班人">
                <el-option v-for="value in userList" :key="value.userId" :label="value.userName"
                  :value="value.userName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系方式" prop="liaisonPhone">
              <el-input :disabled="(title === '记录详情')" v-model="form.liaisonPhone" placeholder="请输入联系方式"
                style="width:100%">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider>交班信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="交班人" prop="alternateUser" label-width="90px">
              <el-select :disabled="(title === '记录详情')" v-model="form.alternateUser" style="width:100%"
                placeholder="请选择交班人">
                <el-option v-for="value in userList" :key="value.userId" :label="value.userName"
                  :value="value.userName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="交班时间" prop="alternateTime" label-width="90px">
              <el-date-picker :disabled="(title === '记录详情')" style="width:100%" v-model="form.alternateTime"
                type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="接班人" prop="replaceUser" label-width="90px">
              <el-select :disabled="(title === '记录详情')" v-model="form.replaceUser" style="width:100%"
                placeholder="请选择接班人">
                <el-option v-for="value in userList" :key="value.userId" :label="value.userName"
                  :value="value.userName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="接班时间" prop="replaceTime" label-width="90px">
              <el-date-picker :disabled="(title === '记录详情')" style="width:100%" v-model="form.replaceTime"
                type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="附件" prop="file" label-width="90px">
              <FileUpload v-if="!(title === '记录详情')" :isFile="true" v-model="form.file" :isShowTip="false" :limit="1"
                @input="inputfile">
              </FileUpload>
              <el-link v-else :href="form.file" target="_blank" type="primary">{{
                this.form.fileName ||
                  '附件资料'
              }}</el-link>

            </el-form-item>

          </el-col>
        </el-row>
        <el-divider>当日值班记录</el-divider>
        <el-table :data="form.tDutyRecordInfoList" style="width: 100%">
          <el-table-column label="序号" width="50" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="公司名称" min-width="160" align="center">
            <template slot-scope="scope">
              <el-input :disabled="(title === '记录详情')" v-model="scope.row.companyName" placeholder="请输入公司名称"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="事件名称" min-width="220" align="center">
            <template slot-scope="scope">
              <el-input :disabled="(title === '记录详情')" v-model="scope.row.eventName" placeholder="请输入事件描述">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="事件时间" width="230" align="center">
            <template slot-scope="scope">
              <el-date-picker :disabled="(title === '记录详情')" v-model="scope.row.eventTime" type="datetime"
                placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="报警级别" min-width="80" align="center">
            <template slot-scope="scope">
              <el-select :disabled="(title === '记录详情')" v-model="scope.row.warnLevel" style="width:100%"
                placeholder="级别">
                <el-option v-for="(value, i) in ['一般', '较重', '严重', '特别严重']" :key="i" :label="value" :value="i + ''">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="事件处理" min-width="220" align="center">
            <template slot-scope="scope">
              <el-input :disabled="(title === '记录详情')" v-model="scope.row.eventHandleDescribe" placeholder="请输入事件处理描述">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="整改完成时间" width="230" align="center">
            <template slot-scope="scope">
              <el-date-picker :disabled="(title === '记录详情')" v-model="scope.row.handleTime" type="datetime"
                placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button v-if="(scope.$index === 0)" :disabled="!(title !== '记录详情')" size="small" type="success"
                icon="el-icon-plus" @click="handleadd()">新增
              </el-button>
              <el-button v-else icon="el-icon-delete" :disabled="!(title !== '记录详情')" size="small" type="danger"
                @click="handleDelete(scope.$index)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div class="titshi">
        <div class="title">值班要求</div>
        <p>1、值班人员在值班期间严格按值班时间上下班,按时到岗,不得无故擅自脱岗</p>
        <p>2、严格做好交接班,值班人员上、下班必须办理好交接手续,认真填写值班记录,并签名</p>
        <p>3、值班人员要相互配合做好当日值班的工作,电话保持畅通</p>
        <p>4、值班人员要及时发现问题,并及时上报值班负责人及管委会</p>
      </div>
    </div>
    <br>
    <div align="center" slot="footer" class="dialog-footer" v-if="!(title === '记录详情')">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="clear">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { Createdduty, Updateduty } from "@/api/record/index.js";
import { listUser } from "@/api/system/user.js";

// import Upload from '@/components/upload/index.vue'
export default {
  props: ['title', 'rowObj'],
  components: {
    // Upload
  },
  data () {
    return {
      ValueList: [],
      userList: [],
      realTime: undefined,
      form: {
        "dutyDate": undefined,   //值班日期
        "dutyStartTime": undefined,   //值班开始时间
        "dutyEndTime": undefined,   //值班结束时间
        "dutyType": undefined,   //班别（1白班 2晚班）
        "dutyAddress": '武穴市马口医药化工产业园',   //值班地点
        "dutyUser": undefined,   //值班人
        "liaisonPhone": undefined,   //联系电话
        "alternateUser": undefined,   //交班人
        "alternateTime": undefined,   //交班时间
        "replaceUser": undefined,   //接班人
        "replaceTime": undefined,   //接班时间
        "file": undefined,   //附件
        "fileName": undefined,
        "tDutyRecordInfoList": [   //
          {
            "companyName": undefined,   //公司名称
            "eventName": undefined,   //事件名称
            "eventTime": undefined,   //事件时间
            "warnLevel": undefined,   //报警级别(0一般 1较重 2严重 3特别严重)
            "eventHandleDescribe": undefined,   //事件处理描述
            "handleTime": undefined   //整改完成时间
          }
        ]
      },
      typeList: [],
      rules: {
        dutyDate: { required: true, message: '必填', trigger: ['blur', 'change'] },
        dutyStartTime: { required: true, message: '必填', trigger: ['blur', 'change'] },
        dutyType: { required: true, message: '必填', trigger: ['blur', 'change'] },
        dutyAddress: { required: true, message: '必填', trigger: ['blur', 'change'] },
        dutyUser: { required: true, message: '必填', trigger: ['blur', 'change'] },
        alternateUser: { required: true, message: '必填', trigger: ['blur', 'change'] },
        alternateTime: { required: true, message: '必填', trigger: ['blur', 'change'] },
        replaceUser: { required: true, message: '必填', trigger: ['blur', 'change'] },
        replaceTime: { required: true, message: '必填', trigger: ['blur', 'change'] },
        file: { required: true, message: '必填', trigger: ['blur', 'change'] },
      }
    }
  },
  computed: {
    ascArr () {
      return {
        '1': '白班',
        '2': '晚班'
      }
    },
    userID () {
      return this.$store.state.user.name
    },
    phone () {
      return this.$store.state.user.Phone
    }
  },
  created () {
    this.form.dutyUser = this.userID
    this.form.liaisonPhone = this.phone
    this.form.alternateUser = this.userID
    this.getlist()
  },
  methods: {
    inputfile (url) {
      if (url) {
        this.form.fileName = url[0].name
        this.form.file = url[0].url
      } else {
        this.form.fileName = ''
        this.form.file = ''
      }
    },
    async getlist () {
      const queryuser = {
        status: '0'//正常
      }

      let { data: user } = await listUser(queryuser)
      this.userList = user
      if (this.title === '修改记录' || this.title === '记录详情') {//修改进入
        this.form = { ...this.rowObj }
        this.realTime = [this.form.dutyStartTime, this.form.dutyEndTime]
      }
    },
    handlerChangeUser (userName) {
      this.userList.forEach(item => {
        if (userName === item.userName) {
          this.form.liaisonPhone = item.phonenumber
        }
      })
    },
    handlerTimeChange () {
      if (this.realTime && this.realTime.length) {
        this.form.dutyStartTime = this.realTime[0]
        this.form.dutyEndTime = this.realTime[1]
      } else {
        this.form.dutyStartTime = undefined
        this.form.dutyEndTime = undefined
      }

    },
    handlerParent (id) {
      this.typeList.forEach(element => {
        if (element.id === id) {
          this.form.ascription = element.ascription
        }
      });
    },
    //提交
    submitForm () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // for (let index = 0; index < this.form.tDutyRecordInfoList.length; index++) {
          //   const e = this.form.tDutyRecordInfoList[index];
          //   if ((!e.companyName) || !e.eventName || !e.eventTime || !e.warnLevel || !e.eventHandleDescribe || !e.handleTime) {
          //     return this.$message.error(`请将列表内序号为${index + 1}的数据填写完整`)
          //   }
          // }
          if (this.title === '修改记录') {//修改
            let params = {
              ...this.form,
            }
            Updateduty(params).then(res => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.clear()

              }
            })
          } else {//新增
            let params = {
              ...this.form,
            }
            Createdduty(params).then(res => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.clear()
              }
            })
          }
        }
      });
    },
    handleadd () {
      this.form.tDutyRecordInfoList.push({
        "companyName": undefined,   //公司名称
        "eventName": undefined,   //事件名称
        "eventTime": undefined,   //事件时间
        "warnLevel": undefined,   //报警级别(0一般 1较重 2严重 3特别严重)
        "eventHandleDescribe": undefined,   //事件处理描述
        "handleTime": undefined   //整改完成时间
      })
    },
    handleDelete (index) {
      this.form.tDutyRecordInfoList.splice(index, 1)
    },
    clear () {
      this.$emit('quit')
    }
  }
}
</script>

<style lang="scss" scoped>
.titshi {
  font-size: 12px;
  color: #515a6e;
  margin: 30px auto 0px;
  width: 50%;
  height: 180px;
  border: 1px solid #eee;
  border-radius: 15px;
  padding: 30px;
  position: relative;

  .title {
    position: absolute;
    top: -18px;
    left: 48%;
    background-color: #fff;
    padding: 10px;
  }
}
</style>